<template>
    <show-modal :title="options.title" :loading="options.loading" width="740px" @cancel="cancel" :isSure="false">
        <table-search :isControl="false">
            <template #form>
            </template>
            <template #extra>
                <a-space>
                    <a-button type="primary" @click="pickItem(null)"><plus-outlined />新增字典值</a-button>
                    <a-button type="primary" danger :disabled="selectedRowKeys.length ? false : true"
                        @click="removeItem(null, remove, deleteMsg, 'id')"><delete-outlined />删除</a-button>
                </a-space>
            </template>
        </table-search>
        <a-table :columns="dataColumns" bordered :loading="loading" :dataSource="list" rowKey="id" :pagination="pagination"
            :row-selection="selection">
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.key === 'index'">
                    <span>{{ startLimit + index }}</span>
                </template>
                <template v-else-if="column.key === 'dict_color'">
                    <a-tag :key="record.id" :color="record.dict_color">
                        {{ record.dict_label }}
                    </a-tag>
                </template>
                <template v-else-if="column.key === 'action'">
                    <a-space>
                        <a-button size="small" type="primary" block @click="pickItem(record)">编辑</a-button>
                        <a-button size="small" type="primary" danger block
                            @click="removeItem(record, remove, deleteMsg, 'id')">删除</a-button>
                    </a-space>
                </template>
            </template>
        </a-table>

        <template v-if="showInfo">
            <ContentInfo :dictCode="props.info.code" :info="showItem" @cancel="close" @submit="search(1)" />
        </template>

    </show-modal>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { useTable } from '@/hooks/use-table';
import { PlusOutlined } from '@ant-design/icons-vue';
import { dataColumns } from '../columns'
import ContentInfo from './content-info.vue'
import { remoteList, remove } from '@/api/system/dict/index'

let props = defineProps({
    info: {
        type: Object || null,
        default: () => { }
    }
});
let emit = defineEmits(['cancel']);
//取消
const cancel = () => {
    emit('cancel')
}
if (!props.info || !props.info.code) {
    cancel();
}
/**基本配置 */
const options = reactive({
    title: '字典值列表',
    loading: false
})
let {
    list,
    selectedRowKeys,
    startLimit,
    loading,
    showItem,
    showInfo,
    pagination,
    selection,
    removeItem,
    pickItem,
    close,
    search
} = useTable(remoteList, { dict_code: props.info.code }, (res: any) => {
    console.log(res)
});

let deleteMsg = ref<string>('确定删除字典内容？');

</script>